<template>
    <box left="1440px"
         top="60px"
         title="用户">

        <div class='righttop flex'>

            <div class="left">
                <div class="item add">
                    <img src="../../../assets/img/home/user-icon-1.png"
                         alt="">
                    <p class="val">{{info.increase?info.increase:""}}</p>
                    <p class="label">兴趣人群数</p>
                </div>
                <div class="item user">
                    <img src="../../../assets/img/home/user-icon-2.png"
                         alt="">
                    <p class="val">{{info.total?info.total:""}}</p>
                    <p class="label">新增会员数</p>
                </div>
            </div>
            <my-title left="150px"
                      top="40px"></my-title>
            <div class="chart"
                 ref="chart"></div>
            <p class="tip">*单位均为万人</p>
        </div>
    </box>

</template>

<script>
export default {
    props: {
        info: {},
    },
    watch: {
        info: {
            handler(newVal) {
                this.chartInit(
                    newVal.increaseChartData,
                    newVal.totalChartData,
                    newVal.xData
                )
            },
            deep: true,
        },
    },
    methods: {
        chartInit(increaseChartData, totalChartData, xData) {
            let _chart = this.$echarts.init(this.$refs['chart'])
            let _options = {
                grid: {
                    top: '40',
                    right: '20',
                    left: '40',
                    bottom: '30', //图表尺寸大小
                },
                legend: {
                    textStyle: {
                        color: '#8fadcc',
                        fontSize: 12,
                    },
                    itemWidth: 8,
                    itemHeight: 8,
                    icon: 'circle',
                    right: 0,
                    top: 10,
                },
                tooltip: {},
                xAxis: {
                    type: 'category',
                    color: '#59588D',
                    data: xData,
                    axisLabel: {
                        margin: 8,
                        color: '#8fadcc',
                        textStyle: {
                            fontSize: 14,
                        },
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,0.1)',
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        show: false,
                    },
                },
                yAxis: [
                    {
                        axisLabel: {
                            color: '#8fadcc',
                            textStyle: {
                                fontSize: 8,
                            },
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: 'rgba(255,255,255,0.1)',
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        splitLine: {
                            show: false,
                        },
                    },
                ],
                series: [
                    {
                        type: 'bar',
                        name: '兴趣人群数',
                        data: increaseChartData,
                        barWidth: '6',
                        barGap: '80%',
                        itemStyle: {
                            normal: {
                                color: new this.$echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: 'rgba(51,185,255,1)',
                                        },
                                        {
                                            offset: 1,
                                            color: 'rgba(12,29,100,1)',
                                        },
                                    ]
                                ),
                                barBorderRadius: [30, 30, 0, 0], //圆角大小
                            },
                        },
                    },
                    {
                        type: 'bar',
                        name: '新增会员数',
                        data: totalChartData,
                        barWidth: '6',
                        barGap: '80%',
                        itemStyle: {
                            normal: {
                                color: new this.$echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: '#ffd300',
                                        },
                                        {
                                            offset: 1,
                                            color: 'rgba(255,211,0,0.1)',
                                        },
                                    ]
                                ),
                                barBorderRadius: [30, 30, 0, 0], //圆角大小
                            },
                        },
                    },
                ],
            }
            _chart.setOption(_options)
        },
    },
    created() {},
    mounted() {
        this.chartInit()
    },
}
</script>
<style lang='less' scoped>
.left {
    width: 130px;
    .item {
        width: 92px;
        margin: 16px auto 0 auto;
        text-align: center;
        .val {
            font-size: 18px;
            color: #33bbff;
            font-weight: bold;
            margin: 10px 0;
        }
        .label {
            font-size: 12px;
        }
    }
}
.chart {
    width: 272px;
    height: 260px;
}
.tip {
        position: absolute;
        bottom: 0;
        right: 0;
        color: #8fadcc;
        font-size: 12px;
    }
</style>